<template>
  <div class="mainitem">
    <div class="m-header">
      <div>学籍信息管理></div>
      <div>校区信息管理</div>
    </div>
    <div class="m-body">
      <div class="bq-all">
        <span class="xian"></span>
        校区信息
      </div>
      <div class="m-title">
        <span class="zong" id="zong" @click="zong"></span>
        <span class="list" id="list" @click="list"></span>

        <button class="m-add" @click="addMainItem">新增校区</button>
        <div class="sousuo" @click="searchp">
          <svg title="搜索 " class="iconsousuo ic" aria-hidden="true">
            <use xlink:href="#iconsousuo" />
          </svg>
        </div>
        <div class="input-box">
          <input type="text" v-model="searchkey" placeholder="校区名称" />
          <!-- <span @click="searchp"></span> -->
        </div>
      </div>
      <!-- <div class="m-search">
        
        <button class="m-add" @click="addMainItem">新增父项目</button>
        <div class="input-box">
          <input type="text" placeholder="项目名称" />
          <span></span>
        </div>
      </div>-->
      <div class="m-table" v-show="tableflag">
        <ul class="myProject-from-title">
          <li style="width:10.66%">编号</li>
          <li>校区名称</li>
          <li>校区负责人</li>
          <li>校区所在省</li>
          <li style="width:22.66%">校区所在市</li>
          <!-- <li>修改人</li>
          <li>修改时间</li>-->
          <li>操作</li>
        </ul>
        <ul
          class="myProject-from-nav"
          v-for="(item, index) in card"
          :key="item.id"
          @click="selectrow(index)"
        >
          <li style="width:10.66%">{{ index + 1 }}</li>
          <li>{{ item.schoolName}}</li>
          <li>{{ item.schoolHead }}</li>
          <li>{{ item.province }}</li>
          <li style="width:22.66%">
            {{ item.city }}
          </li>
          <li>
            <img
              src="../../assets/images/fill-view.png"
              alt
              @click="details(item.id)"
            />
            <img
              src="../../assets/images/edit.png"
              alt
              @click="alter(item.id)"
            />
            <!-- <img src="../../assets/images/remove.png" alt @click="del(item.id)" /> -->
          </li>
        </ul>
        <!-- <ul class="myProject-from-nav">
          <li>1</li>
          <li>ppp环境治理</li>
          <li>张三</li>
          <li>李四四</li>
          <li>河南省郑州市</li>
          <li>
            <img src="../../assets/images/fill-view.png" alt @click="details(1)" />
            <img src="../../assets/images/edit.png" alt @click="alter(1)" />
            <img src="../../assets/images/remove.png" alt @click="del" />
          </li>
        </ul>
        <ul class="myProject-from-nav">
          <li>1</li>
          <li>ppp环境治理</li>
          <li>张三</li>
          <li>李四四</li>
          <li>河南省郑州市</li>
          <li>
            <img src="../../assets/images/fill-view.png" alt @click="details(1)" />
            <img src="../../assets/images/edit.png" alt @click="alter(1)" />
            <img src="../../assets/images/remove.png" alt @click="del" />
          </li>
        </ul>
        <ul class="myProject-from-nav">
          <li>1</li>
          <li>ppp环境治理</li>
          <li>张三</li>
          <li>李四四</li>
          <li>河南省郑州市</li>
          <li>
            <img src="../../assets/images/fill-view.png" alt @click="details(1)" />
            <img src="../../assets/images/edit.png" alt @click="alter(1)" />
            <img src="../../assets/images/remove.png" alt @click="del" />
          </li>
        </ul>
        <ul class="myProject-from-nav">
          <li>2</li>
          <li>ppp环境治理</li>
          <li>张三</li>
          <li>李四四</li>
          <li>河南省郑州市</li>
          <li>
            <img src="../../assets/images/fill-view.png" alt @click="details(1)" />
            <img src="../../assets/images/edit.png" alt @click="alter(1)" />
            <img src="../../assets/images/remove.png" alt @click="del" />
          </li>
        </ul>-->
      </div>
      <div class="m-mingpian" v-show="mingpianflag">
        <div class="mingpian" v-for="item in card" :key="item.id">
          <div class="mingpian-nei">
            <div class="mingpian-name">
              <img src="../../assets/images/touxiang.jpg" alt />
              <div>
                {{ item.schoolName }}
                <span>校区名称</span>
              </div>
            </div>
            <div class="mingpian-biaoqian">
              <div>
                校区负责人
                <span>{{ item.schoolHead }}</span>
              </div>
              <div>
                校区所在省
                <span>{{ item.province }}</span>
              </div>
              <div>
                校区所在市
                <span>{{ item.city }}</span>
              </div>
            </div>
          </div>
          <div class="mingpian-di">
            <div class="ck" @click="details(item.id)">
              <span></span>
              查看
            </div>
            <div class="bj" @click="alter(item.id)">
              <span></span>
              编辑
            </div>
            <!-- <div class="sc" @click="del(item.id)">
              <span></span>
              删除
            </div>-->
            <!-- <div class="mpadd" @click="addSubProject" v-show="subCardVisiable.subProjectAdd"></div> -->
          </div>
        </div>
      </div>
      <div class="m-page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.pageNum"
          :page-sizes="[12]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagetotal"
        ></el-pagination>
      </div>
    </div>
    <!-- 新增弹出框 -->
    <div class="alterbox" v-show="addflag">
      <div class="mainalter-box" style=" width35%;">
        <div class="mainalter-box-body">
          <div class="mainalter-box-bodybox">
            <div class="bq-all">
              <span class="xian"></span>
              项目信息新增
              <div class="cha" @click="cancel"></div>
            </div>
            <div class="mainalter-box-inputbox">
              <span>
                <i>*</i>项目名称
              </span>
              <input type="text" v-model="addmsg.parentProjectName" placeholder="请输入" />
            </div>
            <div class="mainalter-box-inputbox">
              <span>
                <i>*</i>项目公司负责人
              </span>
              <input type="text" v-model="addmsg.projHead" placeholder="请输入" />
            </div>
            <div class="mainalter-box-inputbox">
              <span>
                <i>*</i>建设公司负责人
              </span>
              <input type="text" v-model="addmsg.constructionHead" placeholder="请输入" />
            </div>
            <div class="mainalter-box-inputbox">
              <span>
                <i>*</i>所在省份
              </span>
              <input type="text" v-model="addmsg.provinces" placeholder="××省" />
            </div>
            <div class="mainalter-box-inputbox">
              <span>
                <i>*</i>所在城市
              </span>
              <input type="text" v-model="addmsg.city" placeholder="xx市" />
            </div>
            <div class="mainalter-box-inputbox">
              <span>所在区(县)</span>
              <input type="text" v-model="addmsg.district" placeholder="××区(县)" />
            </div>
            <div class="mainalter-box-inputbox">
              <span>所在城镇</span>
              <input type="text" v-model="addmsg.town" placeholder="××镇" />
            </div>
            <!-- <div class="mainalter-box-inputbox">
              <span>创建人</span>
              <input type="text" placeholder="请输入" />
            </div>
            <div class="mainalter-box-inputbox">
              <span>创建时间</span>
              <input type="text" placeholder="请输入" />
            </div>-->
            <!-- <div class="mainalter-box-inputbox">
              <span>更新人</span>
              <input type="text" placeholder="请输入" />
            </div>
            <div class="mainalter-box-inputbox">
              <span>更新时间</span>
              <input type="text" placeholder="请输入" />
            </div>-->
          </div>
        </div>
        <div class="mainalter-box-button">
          <button class="bc" @click="addsure">确定</button>
          <button class="tj" @click="cancel">取消</button>
        </div>
      </div>
    </div>
    <!-- 修改弹出层 -->
    <div class="alterbox" v-show="alterflag">
      <div class="mainalter-box">
        <div class="mainalter-box-body">
          <div class="mainalter-box-bodybox">
            <div class="bq-all">
              <span class="xian"></span>
              项目信息修改
              <div class="cha" @click="cancel"></div>
            </div>
            <div class="mainalter-box-inputbox">
              <span><i>*</i>项目名称</span>
              <input type="text" v-model="updetemsg.parentProjectName" placeholder="请输入" />
            </div>
            <div class="mainalter-box-inputbox">
              <span><i>*</i>项目公司负责人</span>
              <input
                type="text"
                v-model="updetemsg.projHead"
                placeholder="请输入"
              />
            </div>
            <div class="mainalter-box-inputbox">
              <span><i>*</i>建设公司负责人</span>
              <input
                type="text"
                v-model="updetemsg.constructionHead"
                placeholder="请输入"
              />
            </div>
            <div class="mainalter-box-inputbox">
              <span><i>*</i>项目所在省份</span>
              <input
                type="text"
                v-model="updetemsg.provinces"
                placeholder="××省"
              />
            </div>
            <div class="mainalter-box-inputbox">
              <span><i>*</i>项目所在城市</span>
              <input
                type="text"
                v-model="updetemsg.city"
                placeholder="请输入"
              />
            </div>
            <div class="mainalter-box-inputbox">
              <span>项目所在区(县)</span>
              <input
                type="text"
                v-model="updetemsg.district"
                placeholder="××区(县)"
              />
            </div>
            <div class="mainalter-box-inputbox">
              <span>项目所在城镇</span>
              <input type="text" v-model="updetemsg.town" placeholder="××镇" />
            </div>
            <!-- <div class="mainalter-box-inputbox">
              <span>创建人</span>
              <input type="text" placeholder="请输入" />
            </div>
            <div class="mainalter-box-inputbox">
              <span>创建时间</span>
              <input type="text" placeholder="请输入" />
            </div>
            <div class="mainalter-box-inputbox">
              <span>更新人</span>
              <input type="text" placeholder="请输入" />
            </div>
            <div class="mainalter-box-inputbox">
              <span>更新时间</span>
              <input type="text" placeholder="请输入" />
            </div>-->
          </div>
        </div>
        <div class="mainalter-box-button">
          <button class="bc" @click="updatesure">确定</button>
          <button class="tj" @click="cancel">取消</button>
        </div>
      </div>
    </div>
    <!-- 删除弹出框 -->
    <div class="delbox" v-show="delflag">
      <div class="mdel">
        <div class="bq-all">
          <span class="xian"></span>
          项目信息删除
        </div>
        <div class="mdel-body">你确定要删除该项目的全部信息吗?</div>
        <div class="mdel-button">
          <button class="bc" @click="delsure">确定</button>
          <button class="tj" @click="cancel">取消</button>
        </div>
      </div>
    </div>
    <!-- <div style="float:left"><Consturctormsg></Consturctormsg></div>
    <div style="float:left;margin-left:20px"><Projectsidemsg></Projectsidemsg></div>-->
  </div>
</template>
<style lang="scss" scoped>
@import "../../style/project/mainitem.scss";
</style>
<script>
// import Consturctormsg from "../../components/echars/Consturctormsg";
// import Projectsidemsg from "../../components/echars/Projectsidemsg";
import {
  parentproj,
  addproject,
  updateproject,
  projectid,
  delproject
} from "../../service/project";
export default {
  // components: {
  //  Consturctormsg,
  //  Projectsidemsg
  // },
  data() {
    return {
      //新增弹出框
      addflag: false,
      //修改弹出框
      alterflag: false,
      //删除弹出框
      delflag: false,
      delid: "",
      //表格隐藏
      tableflag: false,
      //名片
      mingpianflag: true,
      //错误
      input: "",
      //分页
      pagetotal: 4, //总数
      //查询
      page: {
        currentPage: 1, //当前页
        // pageNum:1,//页码
        pageSize: 12 //显示
      },
      //名片信息
      card: [],
      //搜索
      searchkey: "",
      //新增信息
      addmsg: {
        parentProjectName: "",
        projHead: "",
        constructionHead: "",
        provinces: "",
        city: "",
        district: "",
        town: ""
      },
      // //修改展示
      // parentmsg: {},
      //修改信息
      updetemsg: {
        parentProjectName: "",
        projHead: "",
        constructionHead: "",
        provinces: "",
        city: "",
        district: "",
        town: "",
        id: ""
      }
    };
  },
  created() {
    var params = {
      currentPage: 1,
      pageSize: 5
    };
    parentproj(params).then(res => {
      this.pagetotal = res.data.obj.total;
      this.card = res.data.obj.rows;
    });
  },
  methods: {
    // 纵向
    zong() {
      this.tableflag = false;
      this.mingpianflag = true;
      this.page.pageNum = 1;
      const parms = Object.assign({}, this.page);
      parentproj(parms).then(res => {
        this.pagetotal = res.data.obj.total;
        this.card = res.data.obj.rows;
      });
    },
    //列表
    list() {
      this.tableflag = true;
      this.mingpianflag = false;
      this.page.pageNum = 1;
      const parms = Object.assign({}, this.page);
      parentproj(parms).then(res => {
        this.pagetotal = res.data.obj.total;
        this.card = res.data.obj.rows;
      });
    },
    //详情
    details(value) {
      this.$router.push({ path: "/subItem", query: { id: value } });
    },
    //新增项目
    addMainItem() {
      this.addflag = true;
      // const parms = {
      //   parentProjectName: "string",
      //   projHead: "string",
      //   constructionHead: "string",
      //   provinces: "string",
      //   city: "string",
      //   district: "string",
      //   town: "string"
      // };
    },
    addsure() {
      //表单验证
      if (this.addmsg.parentProjectName == "") {
        this.$message.error("请输入项目名称");
      } else if (this.addmsg.projHead == "") {
        this.$message.error("请输入项目公司负责人");
      } else if (this.addmsg.constructionHead == "") {
        this.$message.error("请输入建设公司方负责人");
      } else if (this.addmsg.provinces == "") {
        this.$message.error("请输入项目所在省份");
      } else if (this.addmsg.city == "") {
        this.$message.error("请输入项目所在城市");
      } else {
        const parms = this.addmsg;
        addproject(parms).then(res => {
          if (res.data.status == 200) {
            this.cancel();
            const parms = Object.assign({}, this.page);
            parentproj(parms).then(res => {
              this.pagetotal = res.data.obj.total;
              this.card = res.data.obj.rows;
            });
            this.$message({
              message: "新增成功",
              type: "success"
            });
            this.addmsg = {
              parentProjectName: "",
              projHead: "",
              constructionHead: "",
              provinces: "",
              city: "",
              district: "",
              town: ""
            };
          } else {
            this.$message.error(res.data.msg);
          }
        });
      }
    },
    //修改
    alter(vaule) {
      // alert(vaule);
      this.alterflag = true;
      projectid(vaule).then(res => {
        // window.console.log(res.data.obj);
        const parentmsg = res.data.obj;
        this.updetemsg.parentProjectName = parentmsg.parentProjectName;
        this.updetemsg.projHead = parentmsg.projHead;
        this.updetemsg.constructionHead = parentmsg.constructionHead;
        this.updetemsg.provinces = parentmsg.provinces;
        this.updetemsg.city = parentmsg.city;
        this.updetemsg.district = parentmsg.district;
        this.updetemsg.town = parentmsg.town;
        this.updetemsg.id = vaule;
      });
    },
    updatesure() {
      // const params = this.updetemsg;
      if (this.updetemsg.parentProjectName == "") {
        this.$message.error("请输入项目名称");
      } else if (this.updetemsg.projHead == "") {
        this.$message.error("请输入项目公司负责人");
      } else if (this.updetemsg.constructionHead == "") {
        this.$message.error("请输入建设公司方负责人");
      } else if (this.updetemsg.provinces == "") {
        this.$message.error("请输入项目所在省份");
      } else if (this.updetemsg.city == "") {
        this.$message.error("请输入项目所在城市");
      } else {
        const params = this.updetemsg;

        updateproject(params).then(res => {
          if (res.data.status == 200) {
            // alert(res.data.msg);

            this.cancel();
            // this.$message('res.data.msg');
            const parms = Object.assign({}, this.page);
            parentproj(parms).then(res => {
              this.pagetotal = res.data.obj.total;
              this.card = res.data.obj.rows;
            });
            this.$message({
              message: "修改成功",
              type: "success"
            });
          } else {
            // alert(res.data.msg);
            this.$message.error(res.data.msg);
          }
        });
      }
    },
    //删除
    del(id) {
      this.delflag = true;
      this.delid = id;
    },
    delsure() {
      delproject(this.delid).then(res => {
        if (res.data.status == 200) {
          // window.console.log("删除成功")
          this.cancel();
          // this.$message('res.data.msg');
          const parms = Object.assign({}, this.page);
          parentproj(parms).then(res => {
            this.pagetotal = res.data.obj.total;
            this.card = res.data.obj.rows;
          });
          this.$message({
            message: "删除成功",
            type: "success"
          });
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    //弹出框取消按钮
    cancel() {
      this.alterflag = false;
      this.delflag = false;
      this.addflag = false;
      this.addmsg = {
        parentProjectName: "",
        projHead: "",
        constructionHead: "",
        provinces: "",
        city: "",
        district: "",
        town: ""
      };
    },
    //搜索
    searchp() {
      this.page.parentProjectName = this.searchkey;
      this.page.pageNum = 1;
      const parms = Object.assign({}, this.page);
      parentproj(parms).then(res => {
        this.pagetotal = res.data.obj.total;
        this.card = res.data.obj.rows;
      });
    },

    // currentPage4() {
    //   window.console.log("111");
    // },
    handleSizeChange(value) {
      this.page.pageSize = value;
      const parms = Object.assign({}, this.page);
      parentproj(parms).then(res => {
        this.pagetotal = res.data.obj.total;
        this.card = res.data.obj.rows;
      });
    },
    handleCurrentChange(value) {
      this.page.pageNum = value;
      const parms = Object.assign({}, this.page);
      parentproj(parms).then(res => {
        this.pagetotal = res.data.obj.total;
        this.card = res.data.obj.rows;
      });
    },
    selectrow(index) {
      this.current = index;
    }
  }
};
</script>
